<template>
  <div class="block">
    <el-pagination
    background :small="isSmall"
      @current-change="getIndex"
      :current-page="currentPage"
      :page-size="pageSize"
      :layout="layout"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "MyPagination",
  props: {
    total: {//总页码
      type: Number,
      default:1000
    },
    pageSize: {//传入一个整些,表示每页显示多少个
      type: Number,
      default:6
    },
    isSmall:{//是否小型
      type:Boolean,
      default:false
    },
    layout:{
      type:String,
      default:'total, prev, pager, next, jumper'
    }
  },
  data() {
    return {
        currentPage: 1
    };
  },
  methods: {
  // 获取当前页
      getIndex(val) {
        console.log(val);
         if (val <= 1) {
          const h = this.$createElement;
          this.$message({
            message: h("p", null, [
              h(
                "i",
                {
                  style: "color: teal",
                },
                "The page is 1, you can't click the forward button."
              ),
            ]),
          });
        }else if(val>=this.total){
           const h = this.$createElement;
          this.$message({
            message: h("p", null, [
              h(
                "i",
                {
                  style: "color: teal",
                },
                "The page is end, you can't click the back button."
              ),
            ]),
          });
        }
        this.$emit("getIndex",val)
      }
  },
};
</script>

<style lang="less" scoped>
@deep: ~'>>>';
    //样式修改
    @{deep}.el-pager{
        .number,.el-icon{
            border-radius: 50% !important;
        }
    }
    @{deep}.btn-prev{
        border-radius: 50% !important;
        background-color: #13aa52 !important;
        color: #ffffff;
    }
    @{deep}.btn-next{
        border-radius: 50% !important;
        background-color: #13aa52 !important;
        color: #ffffff;
    }
    @{deep}.el-pagination{
      width: 100px !important;
    }
</style>